<template>
  <view class="container" :style="{ 'min-height': screenHeight + 'px' }">
    <view class="content_view">
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar"
          :src="userInfo.avatar || 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
        </image>
      </button>
      <view>
        <text class="title">昵称</text>
        <input type="nickname" class="weui-input" placeholder="请输入昵称" maxlength="15" v-model.trim="userInfo.nickName"
          @change="getNickname" />
      </view>
      <view>
        <text class="title">性别</text>
        <input type="tel" class="weui-input" placeholder="请输入联系方式" maxlength="11" v-model="userInfo.phone" />
      </view>
      <view>
        <text class="title">联系地址</text>
        <input type="text" class="weui-input" placeholder="请输入联系地址" v-model="userInfo.address" />
      </view>
      <view>
        <text class="title">联系邮箱</text>
        <input type="text" class="weui-input" placeholder="请输入联系邮箱" v-model="userInfo.email" />
      </view>
      <view>
        <text class="title">性别</text>
        <picker @change="bindPickerChange" :range="sexOptions" range-key="label">
          <input type="text" class="weui-input" readonly placeholder="请选择性别" v-model="userInfo.sex" />
        </picker>
      </view>
    </view>
    <view class="bottom_view">
      <view class="report_view" @click="submit">
        <text class="report_text">确认修改</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { updateProfile, getProfile } from '@/api/user.js'
import { onShow } from "@dcloudio/uni-app"
import { BASE_URL } from '@/utils/request.js'

const userInfo = ref({
  avatar: '', // 头像
  nickName: '', // 昵称
  gender: 0, // 性别
  sex: '', // 性别显示字段
  phone: '', // 手机号
  address: '', // 联系地址
  email: '' // 联系邮箱
})

const sexOptions = [
  { label: '保密', value: 0 },
  { label: '男', value: 1 },
  { label: '女', value: 2 },
]


// 更改性别
const bindPickerChange = (e) => {
  userInfo.value.gender = e.detail.value
  userInfo.value.sex = sexOptions[e.detail.value].label
}

const getProfileData = async () => {
  const { data } = await getProfile()
  userInfo.value = data
  userInfo.value.sex = sexOptions[data.gender].label
}


onShow(() => getProfileData())

const screenHeight = ref(0)

const getNickname = (e) => {
  userInfo.value.nickName = e.detail.value
}

// 改变头像
const onChooseAvatar = (e) => {
  userInfo.value.avatar = e.detail.avatarUrl
  console.log('🚀 ~ file: setting-account.vue:51 ~ onChooseAvatar ~ e.detail.avatarUrl:', e.detail.avatarUrl)
}

// 提交保存
const submit = () => {
  if (!userInfo.value.avatar) {
    uni.showToast({
      title: '请上传头像',
      icon: 'none'
    })
    return
  }
  if (!userInfo.value.nickName) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none'
    })
    return
  }
  // 判断是否是临时路径
  const isTempUrl = userInfo.value.avatar.includes('http://tmp')
  if (isTempUrl) {
    uni.uploadFile({
      url: `${BASE_URL}/user/uploadTemp`,
      filePath: userInfo.value.avatar,
      name: 'file',
      header: {
        Authorization: 'Bearer ' + uni.getStorageSync('token'),
      },
      success: (res) => {
        const { data } = JSON.parse(res.data)
        userInfo.value.avatar = data
        setUserInfo()
      },
      fail: (err) => {
        uni.showToast({
          title: '上传失败',
          icon: 'error'
        })
      }
    })
  } else {
    setUserInfo()
  }
}
// 设置用户信息
const setUserInfo = () => {
  updateProfile(userInfo.value).then(res => {
    uni.showModal({
      title: '设置成功',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      }
    })
  })
}

onMounted(() => {
  let getWindowInfo = uni.getWindowInfo()
  screenHeight.value = getWindowInfo.windowHeight
})

</script>

<style lang='scss'>
.container {
  display: flex;
  flex-direction: column;
}

/* 边框样式 */
button::after {
  border: 0;
}

.content_view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 100rpx;
  position: relative;

  /* background-color: #F6F6FC; */
  view {
    width: 600rpx;
    display: flex;
    align-items: center;
    margin: 20rpx;

    text {
      width: 150rpx;
    }

    .weui-input {
      height: 80rpx;
      width: 450rpx;
      margin-left: 20rpx !important;
      background: #f4f4f6;
      line-height: 80rpx;
      text-align: center;
    }
  }
}

.avatar-wrapper {
  width: 200rpx;
  height: 200rpx;
  padding: 0 !important;
  margin-bottom: 50rpx !important;
  border-radius: 200rpx;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 200rpx;
  border-style: solid;
  border-width: 1px;
  border-color: #d6d6d5;
}

.bottom_view {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: white;
  z-index: 20;
  padding-top: 10px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.report_view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 706rpx;
  height: 76rpx;
  background-color: #e60012;
  border-radius: 19px;
  margin-bottom: 10px;
}

.report_text {
  color: #fff;
  font-size: 15px;
}
</style>